<template>
    <form-field :ref="(el)=>customValid=el.customValid" :dirty="dirty" @valid="onValid" :innerValidators="[`numberRange|${min}-${max}`]">
        <div class="ph-input-wrap">
            <form-input class="ph-input-start" type="number" :min="min" :max="max" :value="dirtyStart" :disabled="disabled" :placeholder="placeholderStart" @change="onStartChange" @input="onStartChange"/>
            <div class="ph-input-divider"></div>
            <form-input class="ph-input-end" type="number" :min="min" :max="max" :value="dirtyEnd" :disabled="disabled" :placeholder="placeholderEnd" @change="onEndChange" @input="onEndChange"/>
        </div>
    </form-field>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, watch } from 'vue'
import FormField from './field.vue'
import FormInput from './input.vue'
import { numberRangeValid } from '../../shared/util'
export default defineComponent({
    components:{FormField,FormInput},
    props:{
        placeholderStart:{
            type:String
        },
        placeholderEnd:{
            type:String
        },
        start:{
            type:Number
        },
        end:{
            type:Number
        },
        min:{type:Number},
        max:{type:Number},
        disabled:{
            type:Boolean
        },
        customTip:{
            type:String
        }
    },
    setup(props,{emit}) {
        const dirty = ref<Array<number|undefined>>([props.start,props.end])
        const dirtyStart = ref(props.start)
        const dirtyEnd = ref(props.end)

        const validStatus = ref(true)
        const tip = ref("")
        const customValid = ref() as Ref<(e:{valid:boolean,tip:string})=>void>
        let timer = 0
        const onStartChange = (e:Event)=>{
            const t = e.target as HTMLInputElement
            clearTimeout(timer)
            timer = setTimeout(()=>{
                const n = t.value===""?undefined:Number(t.value)
                dirtyStart.value = n
                dirty.value = [dirtyStart.value,dirtyEnd.value]
                const res = numberRangeValid(n,dirtyEnd.value,props.min,props.max)
                validStatus.value = res===true?true:false
                tip.value = res===true?"":res+""
            },300)
        }
        const onEndChange = (e:Event)=>{
            const t = e.target as HTMLInputElement
            clearTimeout(timer)
            timer = setTimeout(()=>{
                const n = t.value===""?undefined:Number(t.value)
                dirtyEnd.value = n
                dirty.value = [dirtyStart.value,dirtyEnd.value]
                const res = numberRangeValid(dirtyStart.value,n,props.min,props.max)
                validStatus.value = res===true?true:false
                tip.value = res===true?"":res+""
            },300)
        }
        watch(()=>validStatus.value,(v)=>{
            customValid.value({
                valid:v,
                tip:v?'':(props.customTip||tip.value)
            })
        })
        const onValid = (e:{valid:boolean,tip:string,v:unknown})=>{
            if(e.valid)
            emit("ph-change",e.v)
        }
        return {
            onValid,
            customValid,
            onStartChange,
            onEndChange,
            dirty,
            dirtyStart,
            dirtyEnd
        }
    },
})
</script>
